<template>
  <div>
    <div class="content">
      <el-card shadow="hover">
        <h3>账号信息</h3>
        <el-row>
          <p>真实姓名</p>
          <el-input v-model="name" :readonly="true" />
        </el-row>
        <el-row>
          <p>联系方式/登入账号</p>
          <el-input v-model="newtelephone" :readonly="true" />
        </el-row>
        <el-row>
          <p>电子邮箱</p>
          <el-input v-model="query.email" placeholder="请输入你的电子邮箱地址" />
        </el-row>
        <el-row>
          <p>原始密码</p>
          <el-input v-model="query.password" show-password type="password" placeholder="修改密码时时需填写，其它请留空" />
        </el-row>
        <el-row>
          <p>新密码</p>
          <el-input v-model="query.new_password" show-password type="password" placeholder="修改密码时时需填写，其它请留空" />
        </el-row>
        <el-row>
          <p>确认新密码</p>
          <el-input v-model="query.new_password_confirmation" show-password type="password" placeholder="修改密码时时需填写，其它请留空" />
        </el-row>
        <el-row class="last-row">
          <el-button type="primary" @click="preservation">保存</el-button>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { editInfo } from '@/api/user'
import { removeToken } from '@/utils/auth'
import Cookies from 'js-cookie'
export default {
  name: 'Personal',
  data() {
    return {
      query: {
        email: '',
        password: '',
        new_password: '',
        new_password_confirmation: ''
      },
      newtelephone: ''
    }
  },
  computed: {
    ...mapGetters(['telephone', 'name', 'password']),
    email() {
      return localStorage.getItem('email')
    }
  },
  created() {
    this.query.email = this.email
    console.log(this.$store.getters.email)
    this.newtelephone = this.telephone.substring(0, 4) + '****' + this.telephone.substring(8)
  },
  methods: {
    preservation() {
      // 密码是否为空,长度是否足够,原始密码是否正确,邮箱是否为空,邮箱验证是否正确
      const passNotNullOrNull = this.query.password === '' || this.query.new_password === '' || this.query.new_password_confirmation === ''
      const passLength = this.query.new_password.length >= 6 && this.query.new_password_confirmation.length >= 6
      const originalPasswordOrRight = this.password === this.query.password
      const newPassConOrRight = this.query.new_password === this.query.new_password_confirmation
      const re = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/
      //
      // 判断邮箱格式
      // 三种请款
      // 1、单独修改邮箱
      if (passNotNullOrNull && this.query.email !== '' && !re.test(this.query.email)) {
        this.$message({
          showClose: true,
          message: '邮箱格式不正确',
          duration: 3000,
          type: 'warning'
        })
      } else if (passNotNullOrNull && this.query.email !== '') {
        const emailObj = { email: this.query.email }
        editInfo(emailObj).then(res => {
          this.$message({
            showClose: true,
            message: '账户邮箱已经修改',
            duration: 3000,
            type: 'success'
          })
          localStorage.setItem('email', this.query.email)
        }).catch(err => {
          this.$message({
            showClose: true,
            message: err,
            duration: 3000,
            type: 'error'
          })
        })
      }
      //
      // 修改密码
      if (this.query.email !== '' && !passNotNullOrNull) {
        // 2、修改密码（有邮箱）
        if (!re.test(this.query.email)) {
          this.$message({
            showClose: true,
            message: '邮箱格式不正确',
            duration: 3000,
            type: 'warning'
          })
        } else if (!passLength) {
          this.$message({
            showClose: true,
            message: '新密码长度不能小于六',
            duration: 3000,
            type: 'warning'
          })
        } else if (!originalPasswordOrRight) {
          this.$message({
            showClose: true,
            message: '原始密码输入错误',
            duration: 3000,
            type: 'warning'
          })
        } else if (!newPassConOrRight) {
          this.$message({
            showClose: true,
            message: '新密码和确认密码不一样',
            duration: 3000,
            type: 'warning'
          })
        } else {
          // 提交
          this.editInfo(this.query.email)
          localStorage.setItem('email', this.query.email)
        }
      } else if (!passNotNullOrNull) {
        // 2、修改密码（没有邮箱）
        if (!passLength) {
          this.$message({
            showClose: true,
            message: '密码长度不能小于六',
            duration: 3000,
            type: 'warning'
          })
        } else if (!originalPasswordOrRight) {
          this.$message({
            showClose: true,
            message: '原始密码输入错误',
            duration: 3000,
            type: 'warning'
          })
        } else if (!newPassConOrRight) {
          this.$message({
            showClose: true,
            message: '新密码和确认密码不一样',
            duration: 3000,
            type: 'warning'
          })
        } else {
          // 提交
          this.editInfo(this.query.email)
        }
      }
      if (passNotNullOrNull && this.query.email === '') {
        this.$message({
          showClose: true,
          message: '不能都为空，修改密码时，三处密码都需填写',
          duration: 3000,
          type: 'warning'
        })
      }
    },
    editInfo(email) {
      const Base64 = require('js-base64')
      var newQuery = {}
      var Tips = ''
      if (email !== '') {
        newQuery = JSON.parse(JSON.stringify(this.query))
        Tips = '账户密码和邮箱已经修改，请重新登入'
      } else {
        newQuery = JSON.parse(JSON.stringify(this.query))
        delete newQuery.email
        Tips = '账户密码已经修改，请重新登入'
      }
      newQuery.password = Base64.encode(newQuery.password)
      newQuery.new_password = Base64.encode(newQuery.new_password)
      newQuery.new_password_confirmation = Base64.encode(newQuery.new_password_confirmation)

      editInfo(newQuery).then(res => {
        this.$message({
          showClose: true,
          message: Tips,
          duration: 3000,
          type: 'success'
        })
        this.$router.push('login')
        Cookies.remove('sign')
        removeToken()
        this.$router.push('login')
      }).catch(err => {
        this.$message({
          showClose: true,
          message: err,
          duration: 3000,
          type: 'error'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
    width: 40%;
    min-width: 400px;
    margin-left: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
    h3{
        font-size: 24px;
        margin: 0 0;
        margin-bottom: 16px;
    }
    p{
        font-size: 14px;
    }
    .el-input{
        width: 90%;
    }
    .el-row{
        margin-bottom: 16px;
    }
    .last-row{
        text-align: center;
        margin-bottom: 0px;
        margin-top: 32px;
    }
}
</style>
